<template>
    <div class='home'>
        <el-form ref="form" class="resform" label-width="120px">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>banner图</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="banner上">
                            <uploadItem @openimg='openimg' :item='banner' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="banner下">
                            <uploadItem @openimg='openimg' :item='banner' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>杂志社合作</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col class="mb10" :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="magazine.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述">
                            <el-input v-model="magazine.input2" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="图片左">
                            <uploadItem @openimg='openimg' :item='magazine' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="图片中">
                            <uploadItem @openimg='openimg' :item='magazine' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="图片右">
                            <uploadItem @openimg='openimg' :item='magazine' :imgname="'img3'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>与合作杂志社 构建完善的预审系统</span>
                </div>
                <el-row :gutter="10">
                    <el-col class="mb10" :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="preliminary.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col class="mb10" :span="12">
                        <el-form-item label="副标题">
                            <el-input v-model="preliminary.input2" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="描述">
                            <el-input v-model="preliminary.input3" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="图片右">
                            <uploadItem @openimg='openimg' :item='preliminary' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>投稿流程及录用时间</span>
                </div>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="图片一">
                            <uploadItem @openimg='openimg' :item='contribution' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>快速合规服务优势</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="advantages_service.input5" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="左图">
                            <uploadItem @openimg='openimg' :item='advantages_service' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="右图">
                            <uploadItem @openimg='openimg' :item='advantages_service' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>文章及合作保密性</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="article.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述">
                            <el-input v-model="article.input2" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="图片一">
                            <uploadItem @openimg='openimg' :item='article' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>成功案例</span>
                </div>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="标题">
                            <el-input v-model="index_success.input1" maxlength="200" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="描述">
                            <el-input v-model="index_success.input2" maxlength="300" type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" ></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row class="mb10" :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="轮播图一">
                            <uploadItem @openimg='openimg' :item='index_success' :imgname="'img1'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="轮播图二">
                            <uploadItem @openimg='openimg' :item='index_success' :imgname="'img2'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="轮播图三">
                            <uploadItem @openimg='openimg' :item='index_success' :imgname="'img3'"></uploadItem>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="轮播图四">
                            <uploadItem @openimg='openimg' :item='index_success' :imgname="'img4'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="10">
                    <el-col :span="12">
                        <el-form-item label="轮播图五">
                            <uploadItem @openimg='openimg' :item='index_success' :imgname="'img5'"></uploadItem>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-card>
        </el-form>
        <div class="addbtnbox">
            <el-button @click="addServe" type="primary">提交</el-button>
        </div>
        <el-dialog :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="">
        </el-dialog>
    </div>
</template>
<script>
import { getToken } from "@/utils/auth";
import uploadItem from "@/views/web/components/uploadItem";
import { selectPages,addPageValue,updatePageValue} from "@/api/pc.js"
export default {
    data(){
       return{
        uploadUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址
        headers: {Authorization: "Bearer " + getToken()},
        // 图片弹窗
        dialogVisible:false,
        // 弹窗图片地址
        dialogImageUrl:'',
        // banner图片
        banner:{img1:'',img2:''},
        // 杂志社合作
        magazine:{input1:'',input2:'',img1:'',img2:'',img3:''},
        // 杂志社预审
        preliminary:{input1:'',input2:'',input3:'',img1:'',},
        // 投稿流程
        contribution:{img1:'',},
        // 快速合规服务优势
        advantages_service:{img1:'',img2:'',input5:'',},
        // 文章及合作保密性
        article:{input1:'',input2:'',img1:'',},
        // 成功案例
        index_success:{input1:'',input2:'',img1:'',img2:'',img3:'',img4:'',img5:''},
        //编辑
        edit:false,
        //编辑
        pageId:'',
       }
    },
    components:{uploadItem},
    mounted(){this.getdata();},
    methods:{
        // 获取数据
        getdata(){
            selectPages({pageType:'index'}).then(res=>{
                if(res.code==200){
                    console.log(JSON.parse(res.data[0].pageValue))
                    if(res.data.length==0){
                        this.edit = false;
                    }else{
                        this.edit = true;
                        this.pageId = res.data[0].pageId;
                        let obj = JSON.parse(res.data[0].pageValue);
                        this.banner=obj.banner;
                        // 杂志社合作
                        this.magazine=obj.magazine;
                        // 杂志社合作
                        this.preliminary=obj.preliminary;
                        // 投稿流程
                        this.contribution=obj.contribution;
                        // 快速合规服务优势
                        this.advantages_service=obj.advantages_service;
                        // 文章及合作保密性
                        this.article=obj.article;
                        // 成功案例
                        this.index_success=obj.index_success;
                    }
                }
            })
        },
        // 打开全屏图片
        openimg(val){
            this.dialogImageUrl = val;
            this.dialogVisible = true;
        },
        addServe(){
            let objall = {
                banner:this.banner,
                magazine:this.magazine,
                preliminary:this.preliminary,
                contribution:this.contribution,
                advantages_service:this.advantages_service,
                article:this.article,
                index_success:this.index_success,
            }
            let obj={pageName:'首页',pageType:'index',pageValue:JSON.stringify(objall),}
            if(!this.edit){
                addPageValue(obj).then(res=>{
                    if(res.code==200){this.$message.success('保存成功！')}
                })
            }else{
                obj.pageId = this.pageId;
                updatePageValue(obj).then(res=>{
                    if(res.code==200){this.$message.success('更新成功！')}
                })
            }
        },
    }
}
</script>
<style lang='scss' scoped>
.home{
    width: 100%;
    height: 100%;
    padding: 20px;
    padding-bottom: 80px;
    position: relative;
    .resform{
        width: 100%;
        height: 100%;
    }
}
.addbtnbox{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    padding: 10px;
    text-align: center;
    z-index: 2;
    background-color: #fff;
}
</style>